
<script>
import {detailBlog} from "../../api/blog";
import "highlight.js/styles/atom-one-light.css";
import {mavonEditor} from "mavon-editor";
import '../../assets/css/vue.css'
import hljs from "highlight.js";
import UserCard from "../../components/user/UserCard.vue";
import CommentList from "../../components/comment/CommentList.vue";

export default {
    name: 'ArticleDetail',
    components: {CommentList, UserCard},
    data() {
        return {
            data: {},
            htmlContent:'',
            menuHtml:'',
            commentFlag:true,
        }
    },
    methods: {
        init() {
            var id=this.$route.params['id']
            detailBlog(id)
                .then(res=>{
                    if(res.code===200){
                        this.data=res.data;
                        console.log(this.data)
                        this.render()
                    }
                })
        },
        render(){
            const md=mavonEditor.getMarkdownIt();
            md.set({
                langPrefix:"hljs language-",
                highlight:  (code)=> {return hljs.highlightAuto(code).value;}
            })
            this.htmlContent=md.render(this.data.content)
        },
    },
    created() {
        this.init()
    },
    mounted() {

    }
}
</script>

<template>
    <div class="flex row center " style="width: 100%;height: 100%;margin-bottom: 20px">

        <div id="mdContent" class="flex column content" style="width: 50%;background: white;padding: 5px 50px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
            <h1>{{data.title}}</h1>
            <div v-html="htmlContent"></div>

            <CommentList style="width: 100%" :id="data.id" type="blog" :flag="commentFlag"/>

        </div>
        <div class="flex center column align-center" style="width: 15%;height: 100px;margin-left: 10px;background: #ff7e71">

        </div>
    </div>
</template>

<style scoped>

.content:deep(img){
    max-width: 100%;
}
.content:deep(div){
    width: 100%;
}
:deep(code){
    border-radius: 10px;
}
:deep(pre){

    padding: 15px;
    border: 20px #3e4c5a;
    border-radius: 10px;
    background: white;
}

:deep(pre):before {
    position: absolute;
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 9999px;
    content: "";
    background: #f95c5b;
    box-shadow: 0 0 0 1px #da3d42, 22px 0 0 0 #fabe3b, 22px 0 0 1px #ecb03e, 44px 0 0 0 #38cd46, 44px 0 0 1px #2eae32;
}
</style>
